<template>
  <h1>{{ msg }}</h1>

  <Patrol
    :position="robotPosition"
    :line="line"
    :after-line="afterLine"
    @spilt-click="spiltClick"
    @spilt-drag="spiltDrag"
  />
</template>

<script setup>
import { defineProps, defineExpose } from 'vue'
import Patrol from 'hema-partol-map-components'

const robotPosition = [180, 105]

const line = [
  [180, 10],
  [180, 100],
  [330, 100],
  [330, 10],
  [1190, 10],
  [1190, 100],
  [1000, 100],
  [1000, 170],
  [350, 170],
]

const afterLine = [
  [180, 10],
  [180, 105],
]

defineProps({
  msg: String,
})

const spiltClick = (val) => {
  console.log(val)
}

const spiltDrag = (val) => {
  console.log(val)
}

defineExpose({
  robotPosition,
  line,
  afterLine,
  spiltClick,
  spiltDrag,
})
</script>

<style>
.pixi {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 800px;
}
</style>